<template>
    <div class="view">
        <nav-bar ref="navBar" v-show="navBarOpacity>0" :style="{opacity: navBarOpacity}" class="head-nav-bar"
                 :title="user.nickname||'个人中心'" rightText="管理"
                 color="#ffffff"
                 leftIconClass="cubeic-back"></nav-bar>
        <cube-scroll ref="scroll" :scroll-events="['scroll']" @scroll="onScrollHandle" :options="{bounce:false}">
            <div class="header">
                <div class="face" @click="toUserDetail">
                    <img :src="user.UserData.headImg"/>
                </div>
                <div class="info">
                    <div class="name" @click="toUserDetail">{{user.UserData.nickName||'请登录'}}</div>
                    <div class="other">学币：¥ {{coin === null ?0:coin.Total }}</div>
                </div>
                <div class="summary">
                    <div class="summary-item">
                        <div class="count">
                            {{scheduleList.length}}
                        </div>
                        <div class="mask">
                            选课单
                        </div>
                    </div>
                    <div class="summary-item">
                        <div class="count">
                            {{myFavList.length}}
                        </div>
                        <div class="mask">
                            关注班级
                        </div>
                    </div>
                    <div class="summary-item">
                        <div class="count">
                            1
                        </div>
                        <div class="mask">
                            今日课程
                        </div>
                    </div>
                    <div class="summary-item">
                        <div class="count">
                            {{myWorkList.length}}
                        </div>
                        <div class="mask">
                            我的作业
                        </div>
                    </div>
                </div>
            </div>
            <fillet-card title="我的订单" class="order-card">
                <div class="order-more" slot="more" @click="moreOrder('999')">
                    查看全部订单<i class="cubeic-arrow"></i>
                </div>
                <div class="order-content" slot="content">
                    <div class="order-status-nav clearfix">
                        <div class="order-status-tab">
                            <div class="order-icon" style="background: #f6b37f">
                                <i class="iconfont icon-dingdan"></i>
                            </div>
                            <div class="text">我的订单</div>
                        </div>
                        <div class="order-status-tab">
                            <div class="order-icon" style="background: #acd598">
                                <i class="iconfont icon-daifukuan"></i>
                            </div>
                            <div class="text">待付款</div>
                        </div>
                        <div class="order-status-tab">
                            <div class="order-icon" style="background: #fe822b">
                                <i class="iconfont icon-yifukuan"></i>
                            </div>
                            <div class="text">已付款</div>
                        </div>
                        <div class="order-status-tab">
                            <div class="order-icon" style="background: #7ecef4">
                                <i class="iconfont icon-daipingjia"></i>
                            </div>
                            <div class="text">待评价</div>
                        </div>
                        <div class="order-status-tab">
                            <div class="order-icon" style="background: #aa89bd">
                                <i class="iconfont icon-shouhou"></i>
                            </div>
                            <div class="text">退款/售后</div>
                        </div>
                    </div>
                </div>
            </fillet-card>
            <div class="mine-item">
                <fillet-card class="link-list">
                    <div class="" slot="content">
                        <list-cell @click="navigateToPage('curriculum')">
                            <div class="list-title" slot="leftSlot">
                                <i class="iconfont icon-rili"></i>
                                我的课表
                            </div>
                        </list-cell>
                        <list-cell @click="navigateToPage('myWork')">
                            <div class="list-title" slot="leftSlot">
                                <i class="iconfont icon-zuoye"></i>
                                我的作业
                            </div>
                        </list-cell>
                        <list-cell @click="navigateToPage('courseTrace')">
                            <div class="list-title" slot="leftSlot">
                                <i class="iconfont icon-baobiao"></i>
                                学习跟踪
                            </div>
                        </list-cell>
                        <list-cell>
                            <div class="list-title" slot="leftSlot">
                                <i class="iconfont icon-yijianfankui"></i>
                                课堂反馈
                            </div>
                        </list-cell>
                        <list-cell>
                            <div class="list-title" slot="leftSlot">
                                <i class="iconfont icon-banjixinxi"></i>
                                我关注的班级
                            </div>
                        </list-cell>
                        <list-cell>
                            <div class="list-title" slot="leftSlot">
                                <i class="iconfont icon-iconfontzhizuobiaozhun17"></i>
                                消息
                            </div>
                        </list-cell>
                        <list-cell :showBorder="false" @click="exit">
                            <div class="list-title" slot="leftSlot">
                                <i class="iconfont icon-tuichu"></i>
                                退出该账号
                            </div>
                        </list-cell>
                    </div>
                </fillet-card>
            </div>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import {exitUser} from "@/store/dispatches";

    import NavBar from "@/components/aui/NavBar.vue";
    import FilletCard from "@/components/aui/FilletCard.vue";
    import ListCell from "@/components/aui/ListCell.vue";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar, FilletCard, ListCell
        }
    })
    export default class Mine extends Scene {
        private navBarHeight: number = 44;
        private pullDownY: number = 0;
        private coin: object | null = null;
        private scheduleList: any[] = [];
        private myFavList: any[] = [];
        private myWorkList: any[] = [];

        @State("UserStore")
        public user!: InterfaceUser;

        private mounted(): void {
            if (this.user.UserId) {
                Http.get(this.api.coinOverView, CommonUnit.argumentWithUser(this.user)).then((res) => {
                    if (res.Success) {
                        this.coin = res.Data;
                        this.$nextTick(() => {
                            this.getOtherData();
                        });
                    } else {
                        (<any> this).$createToast({
                            mask: true,
                            type: "warn",
                            time: 1500,
                            txt: res.Message,
                            onTimeout: () => {
                                if (!CommonUnit.responseLoginVerification(res)) {
                                    this.navigateLoginPage();
                                }
                            }
                        }).show();
                    }
                });
            }
            (<any> this).$refs.scroll.refresh();
            this.navBarHeight = (<any> this).$refs.navBar.barHeight;
        }

        private async getOtherData(): Promise<any> {

            const scheduleListRes = await Http.get(this.api.getMyShopingCart, CommonUnit.argumentWithUser(this.user));
            const myFavListRes = await Http.get(this.api.myFavList, CommonUnit.argumentWithUser(this.user));
            const myWorkRes = await Http.get(this.api.getHomeWorkOverView, CommonUnit.argumentWithUser(this.user));
            this.scheduleList = scheduleListRes.Data || [];
            this.myFavList = myFavListRes.Data || [];
            this.myWorkList = myWorkRes.Data || [];
        }


        private get navBarOpacity(): number {
            return -this.pullDownY / this.navBarHeight;
        }

        private onScrollHandle(pos: any): void {
            this.pullDownY = pos.y;
        }

        private navigateToPage(pageName: string): void {
            this.navigateTo({
                name: pageName
            });
        }

        private moreOrder(status: string = "999") {
            this.navigateTo({
                name: "orderList",
                query: {
                    status: status
                }
            });
        }

        private toUserDetail(): void {
            if (this.user.UserId) {
                console.log(11);
            } else {
                this.navigateTo({
                    name: "login",
                    query: {redirect: this.$route.fullPath},
                });
            }
        }

        private exit(): void {
            (<any> this).$createDialog({
                type: "confirm",
                icon: "cubeic-alert",
                title: "确定退出账号",
                content: "退出账号后，将无法使用本系统哦～",
                confirmBtn: {
                    text: "毅然退出",
                    active: true,
                    disabled: false,
                    href: "javascript:;"
                },
                cancelBtn: {
                    text: "我再想想",
                    active: false,
                    disabled: false,
                    href: "javascript:;"
                },
                onConfirm: () => {
                    exitUser();
                    this.reLaunch();
                }
            }).show();
        }
    }
</script>

<style scoped lang="stylus">
    .view
        background $theme-page-common-background-color;
        height calc(100vh - 47px - env(safe-area-inset-bottom));

    .head-nav-bar
        opacity 0;
        background $theme-light-color;


    .header
        position relative;
        display flex;
        flex-wrap wrap;
        width 100vw;
        height auto;
        box-orient vertical;
        flex-direction row;
        padding-bottom 40px;
        background $theme-light-color;
        z-index 0;
        padding-top calc(10px + env(safe-area-inset-top));

        .summary
            width 100%;
            position relative
            padding-top 15px;
            box-sizing content-box;
            height 40px;
            display flex;
            align-items center;
            color #fff;

            .summary-item
                flex 1;
                height 30px;
                justify-content space-around;
                align-items center;
                display flex;
                flex-direction column;

                .count
                    padding-bottom 7px;

                .mask
                    font-size 12px;

        .face
            display flex;
            overflow hidden;
            border-radius 25px;
            margin-left 18px;
            margin-top 8px;
            width 49px;
            height 49px;
            box-sizing border-box;
            border 1px solid #fff;

            img
                width 100%;
                height 100%

        .info
            padding-left 12px;
            display flex;
            justify-content flex-end;
            box-orient vertical;
            flex-wrap: nowrap;
            flex-direction column;

            .name
                width 200px;
                font-size 20px;
                color #fff;
                height 22px;

            .other
                margin-top 2px;
                height 19px;
                line-height 19px;
                width max-content;
                font-size 10px;
                border-radius 21px;
                background rgba(0, 0, 0, .1);
                color #fff;
                text-align center;
                padding 0 10px


    .order-card
        margin-top -32px;
        position absolute;
        width calc(100% - 24px);

    .order-content
        .order-status-nav
            position relative;
            padding-top 5px

            .order-status-tab
                width 20%;
                padding-top 4px;
                display flex;
                position relative;
                align-items center;
                justify-content center;
                flex-direction column;
                float left;

                .order-icon
                    width 42px;
                    height 42px;
                    border-radius 42px;
                    line-height 42px;
                    text-align center;
                    color #fff;

                    i
                        font-size 26px;

                .text
                    line-height 15px;
                    color #000;
                    max-width 100%
                    font-size 12px;
                    padding-top 7px;
                    padding-bottom 10px;

    .mine-item
        margin 100px auto auto auto;
        overflow hidden;

        .list-title
            display flex;
            height 24px;
            align-items center;
            flex-direction row;
            font-size 14px;

            i.iconfont
                font-size 22px;
                display block;
                width 24px;
                text-align left;
                padding-right 10px;
                color $theme-common-color


</style>
